<template>
  <div>
    <router-link v-if="item.children==null" :to="item.path" :title="item.meta.title" class="layout-menu">
      <el-menu-item :index="item.path">
        <div class="menubox">
          <!-- <svg-icon
            v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
            style="margin-left: 0px;"
            :icon-class="item.meta.icon"/> -->
            {{ item.meta.title }}
        </div>
      </el-menu-item>
    </router-link>
    <el-submenu v-if="item.children!=null" :index="item.meta.title">
      <template slot="title">
        <div class="menubox">
          <!-- <svg-icon
            v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
             style="margin-left: 0px;"
            :icon-class="item.meta.icon"/> -->
            {{ item.meta.title }}
        </div>
      </template>

      <menu-list v-for="it,idx in item.children" :item="it" :index="idx"></menu-list> <!--引用自身，实现递归-->

    </el-submenu>
  </div>
</template>

<script>

import { number } from "echarts";
import MenuList from "./index"   //引入自己，实现递归

export default {
  components: {
    menuList: ()=> import ('@/components/MenuList')
  },
  name: 'MenuRo',
  data() {
    return {
      // 顶部栏初始数
      visibleNumber: 10,
    }
  },
  props: {
    item: {
      type: Object,
      default: null
    },
    idx: {
      type: Number,
      default: 0
    }
  },
  beforeMount() {
    window.addEventListener('resize', this.setVisibleNumber)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setVisibleNumber)
  },
  mounted() {
    this.setVisibleNumber();
    console.log("routers", this.routers);
    
  },
  methods: {

    // 根据宽度计算设置显示栏数
    setVisibleNumber() {
      const width = document.body.getBoundingClientRect().width / 3;
      this.visibleNumber = parseInt(width / 95);
    },
  }
}
</script>

<style scoped>
.menubox {
  padding: 0 20px;
  /* width: 140px; */
  text-align: center;
  font-weight: 600;
  font-size:clamp(18px, calc(18px + 0.1%), 24px)
}
::v-deep .el-submenu__title{
  height: 100px;
  line-height: 100px; 
}
::v-deep .el-submenu__title:hover {
  /* height: 100px;
  line-height: 100px; */
  background-color: #e8f4ff;
}
::v-deep .el-menu--horizontal .el-menu-item:hover{
  /* height: 100px;
  line-height: 100px; */
  background-color: #e8f4ff;
}
::v-deep .el-menu-item {
  height: 100px;
  line-height: 100px;
  padding: 0px;
}
</style>